<!--
 * @description  :
 * @descriptionDetail:
 * @copyright    : 浙江烟草
 * @author       : mhb
 * @create       : 2023-01-17 11:06:06
-->
/**
 * @description  : 内管实地核查-零售户-外流信息
 * @descriptionDetail : 外流信息
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-12-05 10:46:52
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <view class="tabsBottom">
        <u-sticky>
          <u-cell-group class="sticky-header">
            <u-cell-item icon="calendar" title="开始/结束日期" :value="rangeDate" :arrow="true" @tap="dateRange=true">
            </u-cell-item>
          </u-cell-group>
        </u-sticky>
        <retail-head :licNo="licNo" style="margin-top:60px;padding:5px;"></retail-head>
        <me-table
          :i="0"
          :index="0"
          :load-data="loadData"
          :init-load="true"
          ref="mescrollItem0"
        >
          <u-card
            :show-foot="false"
            box-shadow="#e5e5e5 0px 0px 30px"
            slot-scope="d"
            @click="handlerOrderList(d.data)"
          >
            <template #head>
              <u-row>
                <u-col span="2.5">
                  流出到:
                </u-col>
                <u-col span="6.5" style="font-size:32rpx;color:#333333;font-weight:bold;">
                  xx省xx市上城区
                </u-col>
                <u-col span="3" style="font-size:24rpx;color:#BCBCBC;">
                  2022-02-12
                </u-col>
              </u-row>
            </template>
            <template #body>
              <u-row>
                <u-col span="4" style="font-size:32rpx;color:#333333;font-weight:bold;margin-bottom:10rpx;">
                  中华(软)
                </u-col>
                <u-col span="4" style="font-size:32rpx;color:#333333;font-weight:bold;margin-bottom:10rpx;" text-align="center">
                  16(条)
                </u-col>
                <u-col span="4" style="color:#FF9900;font-size:32rpx;font-weight:bold;margin-bottom:10rpx;" text-align="right">
                  ￥1050
                </u-col>
                <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
                  涉及订单:
                </u-col>
                <u-col span="9" style="color:#333333;font-size:30rpx;">
                  CD09698051
                </u-col>
                <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
                  案件名称:
                </u-col>
                <u-col span="9" style="color:#333333;font-size:30rpx;">
                  流出卷烟异常
                </u-col>
                <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
                  案件编号:
                </u-col>
                <u-col span="9" style="color:#333333;font-size:30rpx;">
                  4345838389698051
                </u-col>
              </u-row>
            </template>
          </u-card>
        </me-table>
      </view>
    </view>
    <u-calendar mode="range" max-date="2099-12-31" v-model="dateRange" @change="handlerSearchDate"></u-calendar>
  </view>
</template>

<script>
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import retailHead from "./components/retail-head.vue"
import checkService from "@/service/check/check.service"
import internalService from '@/service/internal/internal.service';
import {dateUtils,} from "@/common/util"
export default {
  components: {
    meTable,retailHead,
  },
  mixins: [MescrollMoreMixin,],

  onLoad(option) {
    this.licNo = option.licNo;
  },
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER),
      dateRange: false,
      rangeDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())) + "至" + dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      startDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
      endDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      isOpen: false,
      keyword: "",
      background: {
        background: "#fff",
      },
      headStyle: {
        fontWeight: 600,
      },
      index:1,
      detailShow: false,  // 显示涉案卷烟
      involvedDetails: [], // 涉案卷烟数据
      licNo:'',
    };
  },
  methods: {
    loadData(page) {
      return checkService.getRetailerCaseInfoByParam(page.num, page.size,{ caseBeginDate: this.caseBeginDate,caseEndDate: this.caseEndDate,licNo: this.licNo,});
    },
    // 日期区间查询条件
    handlerSearchDate(d) {
      this.caseBeginDate = d.startDate;
      this.caseEndDate = d.endDate;
      this.rangeDate = d.startDate + '至' + d.endDate;
      this.$refs["mescrollItem0"].refresh();
    },
    // 涉案卷烟
    handlerOrderList(item) {
      this.$u.loading('查询中...');
      let searchData = {
        caseDateBegin: item.caseDate,
        caseDateEnd: item.caseDate,
        caseCode:item.caseCode,
        status:'02',
      }
      internalService.getOutFlowCigaByParam(1,500,searchData).then(dr => {
        this.$u.hideLoading();
        if (dr.success) {
          this.involvedDetails = dr.data;
          this.detailShow = true;
        } else {
          this.$u.toast(dr.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #FFF;
}
.sticky-header {
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 45px;
  /* #endif */
  width: 100%;
  z-index: 999;
}
/deep/ .u-tabbar__content__item__text {
  font-size: 15px;
}
.headStyle{
    height: 35rpx;
}
</style>
